<template>
  <div class="dakanav" ref="nav">
    <!-- <div class="content"> -->
    <router-link to="/daka/dakazhibo" class="zhibo"
      ><div
        :class="temp == 1 ? 'Style' : ''"
        @click="changeStyle(1)"
        ref="zhibo1"
      >
        大咖直播
      </div>
    </router-link>
    <router-link to="/daka/remendaka" class="remen"
      ><div
        :class="temp == 2 ? 'Style' : ''"
        @click="changeStyle(2)"
        ref="remen1"
      >
        热门大咖
      </div>
    </router-link>
    <!-- </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      temp: 1,
    };
  },
  methods: {
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop >= 100) {
        // console.log( this.$refs.nav);
        // alert(this.$refs.nav)
        this.$refs.nav && (this.$refs.nav.style.height = 50 + "px");
        this.$refs.nav && (this.$refs.nav.style.lineHeight = 50 + "px");
        this.$refs.zhibo1 && (this.$refs.zhibo1.style.fontSize = 18 + "px");
        this.$refs.remen1 && (this.$refs.remen1.style.fontSize = 18 + "px");
        this.$refs.nav && (this.$refs.nav.style.transition = "all 0.5s");
        //  this.$refs.nav.style.paddingTop=-40+"px"
      } else if (scrollTop < 100) {
        // console.log(this.$refs.nav);
        this.$refs.nav&&( this.$refs.nav.style.height = 80 + "px");
        this.$refs.nav&&( this.$refs.nav.style.lineHeight = 80 + "px");
        this.$refs.zhibo1&&( this.$refs.zhibo1.style.fontSize = 20 + "px");
        this.$refs.remen1&&( this.$refs.remen1.style.fontSize = 20 + "px");
      }
    },
    changeStyle(a) {
      this.temp = a;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dakanav {
  width: 100%;
  height: 80px;
  /* text-align: center; */
  line-height: 80px;
  box-shadow: 0px 5px 5px rgba(242, 243, 243, 0.8);
  display: flex;
  justify-content: space-around;
}
.remen {
  margin-right: 200px;
}
.zhibo {
  margin-left: 200px;
}
.zhibo,
.remen {
  text-decoration: none;
  font-size: 20px;
  /* line-height: 80px; */
  color: #525a67;
  vertical-align: top;
}
.Style {
  color: #027cdb;
  border-bottom: 3px solid rgba(2, 124, 219, 0.5);
}
</style>